<script lang="ts" setup>
//行为 
// lang="ts" 告诉编译器，这个文件是 TypeScript 文件,支持ts语法
// setup 告诉编译器，这个文件是 Vue 3 的组合式 API 文件
console.log('Hello world!')

  const nickName: string = '赵丽颖'
  const message:string = `${nickName}，生日快乐！`
</script>

<template>
  <!-- template类似鸿蒙组件的build（）函数，用于构建界面 -->
  <h1 class="title">Hello world!</h1>
  <h1 class="title">赵丽颖，生日快乐！</h1>
  <!-- 通过插值表达式{{}}，往标签中插入文本内容 -->
  <p>{{ nickName }}</p>
  <p>{{ message }}</p>
  <p>{{ nickName.charAt(0) }}</p>
  <!-- 常见错误：双大括号{{}}不能用于属性绑定 -->
  <input type="text" value="{{ nickName }} }}">
</template>

<style scoped>
/* 样式 类似鸿蒙组件的style（）函数，用于定义样式 */
/* scoped 告诉编译器，这个样式只对当前组件生效，避免样式冲突 */
.title {
  color: blueviolet;
}
</style>
</style>